<template>
  <view class="container">
    <scroll-view 
      class="scroll-container" 
      scroll-y 
      :scroll-with-animation="false"
      :show-scrollbar="false"
    >
      <view 
        v-for="(item, index) in contentBlocks" 
        :key="index"
        class="content-wrapper"
      >
        <view class="content-block" :style="{ backgroundColor: item.bgColor }">
          <!--轮播图  -->
          <template v-if="index === 0">
            <van-swipe
              class="swipe-container"
              :autoplay="3000"
              :show-indicators="true"
              indicator-color="#ffffff"
              :style="{ height: 'calc(100vh - 60px)' }"
            >
              <van-swipe-item v-for="(slide, slideIndex) in slides" :key="slideIndex">
                <view class="slide-content">
                  <image :src="slide.image" mode="aspectFill" class="slide-image"  lazy-load />
                  <!-- Top Tags -->
                  <view class="slide-top-tags">
                    <text>JUVENILITY</text>
                    <view class="separator"></view>
                    <text>QUALITY</text>
                    <view class="separator"></view>
                    <text>EMOTION</text>
                  </view>

                  <!-- Main Info Block -->
                  <view class="slide-main-text-block">
                    <!-- <view class="slide-brand">JIUJIUVISION</view> -->
                    <!-- <view class="slide-title">{{ slide.title }}</view> -->
                    <view class="slide-cn-title">{{ slide.description }}</view>
                  </view>

                  <!-- Bottom Tags -->
                  <view class="slide-bottom-tags">
                    <text>优雅</text>
                    <view class="separator"></view>
                    <text>电影</text>
                    <view class="separator"></view>
                    <text>文艺</text>
                  </view>
                </view>
              </van-swipe-item>
            </van-swipe>
          </template>
          <!-- 日照金山 -->
          <template v-else-if="index === 1">
            <view class="brand-content">
              <view class="brand-title">
                <text class="title-cn">日照金山</text>
                <text class="title-en">SUNLIT PEAK</text>
              </view>
              <view class="brand-image">
                <image 
                  :src="item.mainImageUrl" 
                  mode="aspectFill" 
                  @error="handleImageError"
                  @load="handleImageLoad"
                  :style="{ opacity: imageLoaded ? 1 : 0 }"
                />
                <view v-if="!imageLoaded" class="image-loading">
                  <van-loading type="spinner" color="#1989fa" />
                </view>
                <view class="brand-image-overlay">
                  <text>PEAK</text>
                  <view class="separator"></view>
                  <text>SUNLIT</text>
                  <view class="separator"></view>
                  <text>MAJESTY</text>
                </view>
              </view>
              <view class="brand-list">
                <scroll-view 
                  scroll-x 
                  class="list-scroll" 
                  :show-scrollbar="false"
                  :scroll-with-animation="true"
                >
                  <view class="list-item" v-for="(listItem, listIndex) in sunlitPeakList" :key="listIndex">
                   <!-- <div> {{listItem.image}}</div> -->
                    <view class="item-image">
                      <image :src="listItem.image" mode="aspectFill" />
                    </view>
                    <text>{{ listItem.text }}</text>
                  </view>
                </scroll-view>
              </view>
            </view>
          </template>
          <!-- 蓝月谷 -->
          <template v-else-if="index === 2">
            <view class="brand-content">
              <view class="brand-title">
                <text class="title-cn">蓝月谷</text>
                <text class="title-en">BRAND PLANNING</text>
              </view>
              <view class="brand-image">
                <image 
                  :src="item.mainImageUrl" 
                  mode="aspectFill" 
                  @error="handleImageError"
                  @load="handleImageLoad"
                  :style="{ opacity: imageLoaded ? 1 : 0 }"
                />
                <view v-if="!imageLoaded" class="image-loading">
                  <van-loading type="spinner" color="#1989fa" />
                </view>
                <view class="brand-image-overlay">
                  <text>LAKE</text>
                  <view class="separator"></view>
                  <text>VALLEY</text>
                  <view class="separator"></view>
                  <text>SERENITY</text>
                </view>
              </view>
              <view class="brand-list">
                <scroll-view 
                  scroll-x 
                  class="list-scroll" 
                  :show-scrollbar="false"
                  :scroll-with-animation="true"
                >
                  <view class="list-item" v-for="(listItem, listIndex) in blueMoonValleyList" :key="listIndex">
                    <view class="item-image">
                      <image :src="listItem.image" mode="aspectFill" />
                    </view>
                    <text>{{ listItem.text }}</text>
                  </view>
                </scroll-view>
              </view>
            </view>
          </template>
          <!-- 姐妹湖 -->
          <template v-else-if="index === 3">
            <view class="brand-content">
              <view class="brand-title">
                <text class="title-cn">姐妹湖</text>
                <text class="title-en">SISTER LAKES</text>
              </view>
              <view class="brand-image">
                <image 
                  :src="item.mainImageUrl" 
                  mode="aspectFill" 
                  @error="handleImageError"
                  @load="handleImageLoad"
                  :style="{ opacity: imageLoaded ? 1 : 0 }"
                />
                <view v-if="!imageLoaded" class="image-loading">
                  <van-loading type="spinner" color="#1989fa" />
                </view>
                <view class="brand-image-overlay">
                  <text>LAKE</text>
                  <view class="separator"></view>
                  <text>VALLEY</text>
                  <view class="separator"></view>
                  <text>SERENITY</text>
                </view>
              </view>
              <view class="brand-list">
                <scroll-view 
                  scroll-x 
                  class="list-scroll" 
                  :show-scrollbar="false"
                  :scroll-with-animation="true"
                >
                  <view class="list-item" v-for="(listItem, listIndex) in sisterLakesList" :key="listIndex">
                    <view class="item-image">
                      <image :src="listItem.image" mode="aspectFill" />
                    </view>
                    <text>{{ listItem.text }}</text>
                  </view>
                </scroll-view>
              </view>
            </view>
          </template>
          <!-- 织梦空间 -->
          <template v-else-if="index === 4">
            <view class="brand-content">
              <view class="brand-title">
                <text class="title-cn">织梦空间</text>
                <text class="title-en">DREAM WEAVING</text>
              </view>
              <view class="brand-image">
                <image 
                  :src="item.mainImageUrl" 
                  mode="aspectFill" 
                  @error="handleImageError"
                  @load="handleImageLoad"
                  :style="{ opacity: imageLoaded ? 1 : 0 }"
                />
                <view v-if="!imageLoaded" class="image-loading">
                  <van-loading type="spinner" color="#1989fa" />
                </view>
                <view class="brand-image-overlay">
                  <text>DREAM</text>
                  <view class="separator"></view>
                  <text>WEAVING</text>
                  <view class="separator"></view>
                  <text>SPACE</text>
                </view>
              </view>
              <view class="brand-list">
                <scroll-view 
                  scroll-x 
                  class="list-scroll" 
                  :show-scrollbar="false"
                  :scroll-with-animation="true"
                >
                  <view class="list-item" v-for="(listItem, listIndex) in dreamSpaceList" :key="listIndex">
                    <view class="item-image">
                      <image :src="listItem.image" mode="aspectFill" />
                    </view>
                    <text>{{ listItem.text }}</text>
                  </view>
                </scroll-view>
              </view>
            </view>
          </template>
          <template v-else>
            <view class="content-title">{{ item.title }}</view>
            <view class="content-desc">{{ item.description }}</view>
            <view class="content-icon">
              <van-icon :name="item.icon" size="48" color="#ffffff" />
            </view>
          </template>
        </view>
      </view>
      <van-back-top  bottom="20vh" />
    </scroll-view>

    
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import request from '@/utils/request';

const slides = ref([]);
const sunlitPeakList = ref([]);
const blueMoonValleyList = ref([]);
const contentBlocks = ref([]);
const imageLoaded = ref(false);
const sisterLakesList = ref([]);
const dreamSpaceList = ref([]);

// 缓存相关配置
const CACHE_KEY = 'image_cache';
const CACHE_EXPIRY = 30 * 60 * 1000; // 30分钟缓存过期

// 缓存管理类
class ImageCache {
  static getCache() {
    try {
      const cache = uni.getStorageSync(CACHE_KEY);
      if (!cache) return null;
      
      const { data, timestamp } = JSON.parse(cache);
      // 检查缓存是否过期
      if (Date.now() - timestamp > CACHE_EXPIRY) {
        uni.removeStorageSync(CACHE_KEY);
        return null;
      }
      return data;
    } catch (error) {
      console.error('Failed to get cache:', error);
      return null;
    }
  }

  static setCache(data) {
    try {
      const cacheData = {
        data,
        timestamp: Date.now()
      };
      uni.setStorageSync(CACHE_KEY, JSON.stringify(cacheData));
    } catch (error) {
      console.error('Failed to set cache:', error);
    }
  }

  static clearCache() {
    try {
      uni.removeStorageSync(CACHE_KEY);
    } catch (error) {
      console.error('Failed to clear cache:', error);
    }
  }
}

// 获取随机图片
const getRandomImage = async (type) => {
  try {
    const res = await request({
      url: `/api/profilepic/GetProfilesAsync?_type=${type}`,
      method: 'get'
    });
    
    if (res.status && res.data && res.data.length > 0) {
      // 随机选择一张图片
      const randomIndex = Math.floor(Math.random() * res.data.length);
      const imageData = res.data[randomIndex];
      
      // 确保图片URL使用正确的协议
      let imageUrl = imageData.picUrl;
      if (imageUrl && !imageUrl.startsWith('http')) {
        imageUrl = `http://${imageUrl}`;
      }
      
      // 根据type设置对应的描述
      let description = '';
      switch(type) {
        case 62: // 日照金山 竖屏
          description = 'Alchemy of Light';
          break;
        case 72: // 蓝月谷 竖屏
          description = 'Lunar Lullaby';
          break;
        case 82: // 姐妹湖 竖屏
          description = 'Mirror Of The Mountains';
          break;
        case 92: // 织梦空间 竖屏
          description = 'Light Stitches The Dark';
          break;
      }
      
      return {
        image: imageUrl,
        description
      };
    }
    return {
      image: '',
      description: 'Default Description'
    };
  } catch (error) {
    console.error(`Failed to fetch images for type ${type}:`, error);
    return {
      image: '',
      description: 'Default Description'
    };
  }
};

// 统一的图片获取函数
const fetchImages = async (horizontalType, verticalType, sectionName) => {
  try {
    const [horizontalRes, verticalRes] = await Promise.all([
      request({
        url: `/api/profilepic/GetProfilesAsync?_type=${horizontalType}`,
        method: 'get'
      }),
      request({
        url: `/api/profilepic/GetProfilesAsync?_type=${verticalType}`,
        method: 'get'
      })
    ]);

    const allImages = [];
    const imageUrls = new Set(); // 用于去重
    
    // 处理横版图片
    if (horizontalRes.status && horizontalRes.data) {
      horizontalRes.data.forEach(item => {
        let imageUrl = item.picUrl;
        if (imageUrl && !imageUrl.startsWith('http')) {
          imageUrl = `http://${imageUrl}`;
        }
        // 检查是否重复
        if (!imageUrls.has(imageUrl)) {
          imageUrls.add(imageUrl);
          allImages.push({
            image: imageUrl,
            text: `${sectionName} 横版`,
            type: horizontalType
          });
        }
      });
    }

    // 处理竖版图片
    if (verticalRes.status && verticalRes.data) {
      verticalRes.data.forEach(item => {
        let imageUrl = item.picUrl;
        if (imageUrl && !imageUrl.startsWith('http')) {
          imageUrl = `http://${imageUrl}`;
        }
        // 检查是否重复
        if (!imageUrls.has(imageUrl)) {
          imageUrls.add(imageUrl);
          allImages.push({
            image: imageUrl,
            text: `${sectionName} 竖版`,
            type: verticalType
          });
        }
      });
    }

    // 确保返回的数组中没有重复的图片
    return Array.from(new Set(allImages.map(img => img.image)))
      .map(url => allImages.find(img => img.image === url));
  } catch (error) {
    console.error(`Failed to fetch ${sectionName} images:`, error);
    return [];
  }
};

// 从缓存更新图片数据
const updateImagesFromCache = (cachedData) => {
  // 更新各个列表，确保不重复
  const updateList = (images, maxCount = 6) => {
    // 使用 Set 确保图片 URL 唯一
    const uniqueUrls = new Set();
    const uniqueImages = [];

    // 遍历图片数组，只保留第一次出现的图片
    for (const image of images) {
      if (!uniqueUrls.has(image.image)) {
        uniqueUrls.add(image.image);
        uniqueImages.push(image);
        if (uniqueImages.length >= maxCount) break;
      }
    }

    return uniqueImages;
  };

  // 更新各个列表，确保不重复
  const processedData = {
    sunlitPeak: updateList(cachedData.sunlitPeak),
    blueMoonValley: updateList(cachedData.blueMoonValley),
    sisterLakes: updateList(cachedData.sisterLakes),
    dreamSpace: updateList(cachedData.dreamSpace)
  };

  // 更新各个列表
  sunlitPeakList.value = processedData.sunlitPeak;
  blueMoonValleyList.value = processedData.blueMoonValley;
  sisterLakesList.value = processedData.sisterLakes;
  dreamSpaceList.value = processedData.dreamSpace;

  // 更新主图片，确保不使用列表中的图片
  const updateMainImage = (images, index) => {
    if (images.length > 0) {
      // 首先尝试找到不在列表中的图片
      const alternativeImage = images.find(img => 
        !processedData.sunlitPeak.some(item => item.image === img.image) &&
        !processedData.blueMoonValley.some(item => item.image === img.image) &&
        !processedData.sisterLakes.some(item => item.image === img.image) &&
        !processedData.dreamSpace.some(item => item.image === img.image)
      );

      // 如果找到了不在列表中的图片，使用它
      if (alternativeImage) {
        contentBlocks.value[index].mainImageUrl = alternativeImage.image;
      } else {
        // 如果没找到，使用第一张图片
        contentBlocks.value[index].mainImageUrl = images[0].image;
      }
    }
  };

  // 更新各个主图片
  updateMainImage(cachedData.sunlitPeak, 1);
  updateMainImage(cachedData.blueMoonValley, 2);
  updateMainImage(cachedData.sisterLakes, 3);
  updateMainImage(cachedData.dreamSpace, 4);
};

// 获取所有图片数据
const fetchAllImages = async () => {
  try {
    // 检查缓存
    const cachedData = ImageCache.getCache();
    if (cachedData) {
      updateImagesFromCache(cachedData);
      return;
    }

    // 并行获取所有图片数据
    const [
      sunlitPeakImages,
      blueMoonValleyImages,
      sisterLakesImages,
      dreamSpaceImages
    ] = await Promise.all([
      fetchImages(61, 62, '日照金山'),
      fetchImages(71, 72, '蓝月谷'),
      fetchImages(81, 82, '姐妹湖'),
      fetchImages(91, 92, '织梦空间')
    ]);

    // 合并所有图片数据
    const allImages = {
      sunlitPeak: sunlitPeakImages,
      blueMoonValley: blueMoonValleyImages,
      sisterLakes: sisterLakesImages,
      dreamSpace: dreamSpaceImages
    };

    // 检查是否所有列表都为空
    const allEmpty = Object.values(allImages).every(images => !images || images.length === 0);
    
    // 只有当不是所有列表都为空时才更新缓存
    if (!allEmpty) {
      ImageCache.setCache(allImages);
    }

    // 更新界面数据
    updateImagesFromCache(allImages);

    // 确保所有主图片都有值
    if (!contentBlocks.value[1].mainImageUrl && sunlitPeakImages.length > 0) {
      contentBlocks.value[1].mainImageUrl = sunlitPeakImages[0].image;
    }
    if (!contentBlocks.value[2].mainImageUrl && blueMoonValleyImages.length > 0) {
      contentBlocks.value[2].mainImageUrl = blueMoonValleyImages[0].image;
    }
    if (!contentBlocks.value[3].mainImageUrl && sisterLakesImages.length > 0) {
      contentBlocks.value[3].mainImageUrl = sisterLakesImages[0].image;
    }
    if (!contentBlocks.value[4].mainImageUrl && dreamSpaceImages.length > 0) {
      contentBlocks.value[4].mainImageUrl = dreamSpaceImages[0].image;
    }
  } catch (error) {
    console.error('Failed to fetch all images:', error);
  }
};

// 获取轮播图数据
const fetchSlides = async () => {
  try {
    // 检查缓存
    const cachedData = ImageCache.getCache();
    if (cachedData) {
      // 从缓存中只获取竖屏图片
      const getRandomVerticalImage = (images) => {
        // 过滤出竖屏图片（type 为 62, 72, 82, 92 的图片）
        const verticalImages = images.filter(img => 
          img.type === 62 || img.type === 72 || img.type === 82 || img.type === 92
        );
        return verticalImages[Math.floor(Math.random() * verticalImages.length)] || images[0];
      };

      const [sunlitPeak, blueMoonValley, sisterLakes, dreamSpace] = [
        getRandomVerticalImage(cachedData.sunlitPeak),
        getRandomVerticalImage(cachedData.blueMoonValley),
        getRandomVerticalImage(cachedData.sisterLakes),
        getRandomVerticalImage(cachedData.dreamSpace)
      ];

      slides.value = [
        {
          title: "日照金山",
          description: "Alchemy of Light",
          image: sunlitPeak?.image
        },
        {
          title: "蓝月谷",
          description: "Lunar Lullaby",
          image: blueMoonValley?.image
        },
        {
          title: "姐妹湖",
          description: "Mirror Of The Mountains",
          image: sisterLakes?.image
        },
        {
          title: "织梦空间",
          description: "Light Stitches The Dark",
          image: dreamSpace?.image
        }
      ];
      return;
    }

    // 如果没有缓存，则重新获取
    const [sunlitPeak, blueMoonValley, sisterLakes, dreamSpace] = await Promise.all([
      getRandomImage(62), // 日照金山 竖屏
      getRandomImage(72), // 蓝月谷 竖屏
      getRandomImage(82), // 姐妹湖 竖屏
      getRandomImage(92)  // 织梦空间 竖屏
    ]);

    slides.value = [
      {
        title: "日照金山",
        description: sunlitPeak?.description || "Alchemy of Light",
        image: sunlitPeak?.image
      },
      {
        title: "蓝月谷",
        description: blueMoonValley?.description || "Lunar Lullaby",
        image: blueMoonValley?.image
      },
      {
        title: "姐妹湖",
        description: sisterLakes?.description || "Mirror Of The Mountains",
        image: sisterLakes?.image
      },
      {
        title: "织梦空间",
        description: dreamSpace?.description || "Light Stitches The Dark",
        image: dreamSpace?.image
      }
    ];
  } catch (error) {
    console.error('Failed to fetch slides:', error);
  }
};

// 处理图片加载错误
const handleImageError = (e) => {
  console.error('Image load error:', e);
  // 可以在这里设置一个默认图片
  if (e.target) {
    e.target.src = 'https://img01.yzcdn.cn/vant/apple-1.jpg';
  }
};

// 处理图片加载成功
const handleImageLoad = () => {
  imageLoaded.value = true;
};

// 初始化数据
onMounted(async () => {
  try {
    // 显示加载状态
    uni.showLoading({
      title: '加载中...'
    });

    // 并行获取所有数据
    await Promise.all([
      fetchSlides(),
      fetchAllImages()
    ]);

    // 隐藏加载状态
    uni.hideLoading();
  } catch (error) {
    console.error('Failed to initialize data:', error);
    uni.showToast({
      title: '加载失败，请重试',
      icon: 'error'
    });
  }
});


contentBlocks.value = [
  {
    title: "轮播图",
    description: "打造独特的视觉体验",
    icon: "brush-o",
    bgColor: "transparent"
  },
  {
    title: "日照金山",
    description: "构建品牌价值体系",
    icon: "chart-trending-o",
    bgColor: "transparent",
    mainImageUrl: ""
  },
  {
    title: "蓝月谷",
    description: "扩大品牌影响力",
    icon: "fire-o",
    bgColor: "transparent",
    mainImageUrl: ""
  },
  {
    title: "姐妹湖",
    description: "提升用户满意度",
    icon: "friends-o",
    bgColor: "transparent",
    mainImageUrl: ""
  },
  {
    title: "织梦空间",
    description: "数据驱动决策优化",
    icon: "bar-chart-o",
    bgColor: "transparent",
    mainImageUrl: ""
  }
];
</script>

<style lang="scss">
page {
  height: 100%;
}

.container {
  height: 100%;
  width: 100%;
  background-color: #ffffff;
  box-sizing: border-box;
}

.scroll-container {
  height: calc(100vh - 60px);
  width: 100%;
}

.content-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.content-block {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 0;
  box-sizing: border-box;
  color: #ffffff;
  overflow: hidden;
}

.brand-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  padding: 20px 0;
  box-sizing: border-box;
}

.brand-title {
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
  box-sizing: border-box;
  color: #000000;
  font-family: 'SimSun', '新宋体', serif;
  
  .title-cn {
    display: block;
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 10px;
    line-height: 1.2;
    font-family: 'STKaiti', '楷体', serif;
  }
  
  .title-en {
    display: block;
    font-size: 16px;
    opacity: 0.8;
    letter-spacing: 2px;
    line-height: 1.2;
    font-family: 'STLiuti', '华文隶书', serif;
  }
}

.brand-image {
  width: 100%;
  height: 35vh;
  margin: 10px 0;
  box-sizing: border-box;
  position: relative;
  background-color: #f5f5f5;
  
  image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
  }

  .image-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f5f5f5;
  }
}

.brand-image-overlay {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  color: #ffffff;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  z-index: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);

  .separator {
    width: 2px;
    height: 12px;
    background-color: #ffffff;
  }
}

.brand-list {
  width: 100%;
  margin-top: 20px;
  display: block;
  flex: 1;
  
  .list-scroll {
    white-space: nowrap;
    width: 100%;
  }
  
  .list-item {
    display: inline-block;
    width: 140px;
    margin-right: 15px;
    
    &:first-child {
      margin-left: 20px;
    }
    
    &:last-child {
      margin-right: 20px;
    }
    
    .item-image {
      width: 140px;
      height: 200px;
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 8px;
      
      image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    
    text {
      font-size: 14px;
      color: #ffffff;
      display: block;
      text-align: center;
    }
  }
}

.swipe-container {
  width: 100%;
  height: 100%;
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;

  :deep(.van-swipe-item) {
    height: 100%;
    will-change: transform;
    backface-visibility: hidden;
  }
}

.slide-content {
  width: 100%;
  height: 100%;
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  will-change: transform;
  backface-visibility: hidden;
}

.slide-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
}

// New styles for top tags
.slide-top-tags {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  color: #ffffff;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  z-index: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);

  .separator {
    width: 2px;
    height: 14px;
    background-color: #ffffff;
  }
}

// New style for main text block
.slide-main-text-block {
  position: absolute;
  bottom: 130px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 1;
  color: #ffffff;
}

.slide-brand {
  font-size: 16px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 10px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.slide-title {
  font-size: 60px;
  font-weight: normal;
  margin-bottom: 10px;
  letter-spacing: 5px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  font-family: 'STKaiti', '华文楷体', serif;
}

.slide-cn-title {
  font-size: 24px;
  font-weight: normal;
  letter-spacing: 2px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  font-family: 'STKaiti', '华文楷体', serif;
  text-align: center;
}

// New styles for bottom tags
.slide-bottom-tags {
  position: absolute;
  bottom: 70px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
  color: #ffffff;
  font-size: 12px;
  letter-spacing: 1px;
  z-index: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);

  .separator {
    width: 2px;
    height: 14px;
    background-color: #ffffff;
  }
}

.content-title, .slide-title {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
  width: 100%;
}

.content-desc, .slide-desc {
  font-size: 18px;
  text-align: center;
  margin-bottom: 40px;
  opacity: 0.9;
  width: 100%;
}

.content-icon, .slide-icon {
  margin-top: 20px;
}

:deep(.van-swipe__indicators) {
  bottom: 30px;
  z-index: 2;
  
  .van-swipe__indicator {
    width: 8px;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.5);
    opacity: 1;
    
    &--active {
      background-color: #ffffff;
      width: 20px;
      border-radius: 4px;
    }
  }
}

.sister-lake-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
  box-sizing: border-box;
  background-color: #f8f9fa;
}

.sister-lake-title {
  text-align: center;
  margin-bottom: 40px;
  
  .title-cn {
    display: block;
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 12px;
    color: #2c3e50;
    font-family: 'STKaiti', '华文楷体', serif;
  }
  
  .title-en {
    display: block;
    font-size: 18px;
    color: #7f8c8d;
    letter-spacing: 3px;
    font-family: 'STLiuti', '华文隶书', serif;
  }
}

.sister-lake-main {
  width: 100%;
  height: 40vh;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
  
  image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }
  
  .image-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f5f5f5;
  }
  
  .image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.6));
    color: #ffffff;
    
    text {
      display: block;
      font-size: 32px;
      font-weight: 500;
      letter-spacing: 1px;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
      margin-bottom: 8px;
    }
    
    .subtitle {
      font-size: 18px;
      opacity: 0.9;
    }
  }
}

.sister-lake-list {
  width: 100%;
  margin-bottom: 30px;
  
  .list-scroll {
    white-space: nowrap;
    padding: 0 20px;
  }
  
  .list-item {
    display: inline-block;
    width: 140px;
    margin-right: 15px;
    
    &:first-child {
      margin-left: 0;
    }
    
    &:last-child {
      margin-right: 0;
    }
    
    .item-image {
      width: 140px;
      height: 200px;
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      
      image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
        
        &:hover {
          transform: scale(1.05);
        }
      }
    }
    
    text {
      font-size: 14px;
      color: #2c3e50;
      display: block;
      text-align: center;
    }
  }
}

.sister-lake-desc {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  
  text {
    display: block;
    font-size: 20px;
    color: #2c3e50;
    margin-bottom: 8px;
    font-family: 'STKaiti', '华文楷体', serif;
  }
  
  .desc-en {
    font-size: 16px;
    color: #7f8c8d;
    letter-spacing: 1px;
    font-family: 'STLiuti', '华文隶书', serif;
  }
}

.dream-space-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  box-sizing: border-box;
}

.dream-space-header {
  text-align: center;
  margin-bottom: 30px;
  padding: 0 20px;
}

.dream-space-title {
  margin-bottom: 15px;
  
  .title-cn {
    display: block;
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  
  .title-en {
    display: block;
    font-size: 18px;
    opacity: 0.8;
    letter-spacing: 2px;
  }
}

.dream-space-subtitle {
  font-size: 16px;
  opacity: 0.9;
}

.dream-space-gallery {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 30px;
  
  .gallery-main {
    width: 100%;
    height: 200px;
    padding: 0 20px;
    box-sizing: border-box;
    
    image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 16px;
    }
  }
  
  .gallery-strip {
    width: 100%;
    
    .strip-scroll {
      white-space: nowrap;
      padding: 0 20px;
      box-sizing: border-box;
    }
    
    .strip-item {
      display: inline-block;
      width: 120px;
      height: 120px;
      margin-right: 15px;
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      
      &:last-child {
        margin-right: 20px;
      }
      
      image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      
      .strip-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 8px;
        background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
        
        text {
          color: #ffffff;
          font-size: 12px;
          display: block;
        }
      }
    }
  }
}

.dream-space-features {
  display: flex;
  justify-content: space-around;
  padding: 0 20px;
  
  .feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    
    text {
      font-size: 14px;
      color: #ffffff;
    }
  }
}

.blue-moon-valley {
  background-color: #f8f9fa;
  padding: 30px 0;
  
  .brand-title {
    margin-bottom: 30px;
    
    .title-cn {
      font-size: 36px;
      color: #2c3e50;
      font-weight: bold;
      margin-bottom: 10px;
      display: block;
      text-align: center;
    }
    
    .title-en {
      font-size: 18px;
      color: #7f8c8d;
      letter-spacing: 3px;
      display: block;
      text-align: center;
    }
  }
  
  .brand-image {
    width: 90%;
    height: 40vh;
    margin: 0 auto 30px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    
    image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
      
      &:hover {
        transform: scale(1.05);
      }
    }
  }
  
  .brand-description {
    text-align: center;
    margin-bottom: 30px;
    padding: 0 20px;
    
    text {
      font-size: 16px;
      color: #34495e;
      line-height: 1.6;
    }
  }
  
  .brand-list {
    padding: 0 20px;
    
    .list-scroll {
      white-space: nowrap;
    }
    
    .list-item {
      display: inline-block;
      width: 160px;
      margin-right: 20px;
      vertical-align: top;
      
      &:first-child {
        margin-left: 0;
      }
      
      .item-image {
        width: 160px;
        height: 240px;
        border-radius: 15px;
        overflow: hidden;
        margin-bottom: 12px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        
        image {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.3s ease;
          
          &:hover {
            transform: scale(1.05);
          }
        }
      }
      
      text {
        font-size: 14px;
        color: #2c3e50;
        display: block;
        text-align: center;
        margin-top: 8px;
      }
    }
  }
  
  .brand-image-overlay {
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), transparent);
    padding: 20px;
    
    text {
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 2px;
    }
    
    .separator {
      background-color: rgba(255, 255, 255, 0.8);
    }
  }
}
</style>